/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2023-10-30 14:07:27
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2023-11-07 18:44:44
 * @FilePath: \projecte:\学习\react\my-react-project\src\views\home\index.tsx
 * @Description: 
 */
import React, { useState } from 'react';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
import styles from './index.module.scss'

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('Option 1', '1', <PieChartOutlined />),
  getItem('Option 2', '2', <DesktopOutlined />),
  getItem('User', 'sub1', <UserOutlined />, [
    getItem('Tom', '3'),
    getItem('Bill', '4'),
    getItem('Alex', '5'),
  ]),
  getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
  getItem('Files', '9', <FileOutlined />),
];

const HomePage: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const [selectkey, setSelectky] = useState(['1'])
  const navigate = useNavigate()

  const handleChangeItem: MenuProps['onClick'] = (e) => {
    // let keyPatch = new Map()
    const url = getPath(e.key)
    setSelectky([e.key])
    navigate(url)
  }

  const linkHome = () => {

    setSelectky([''])
    navigate('/')
  }

  const getPath = (key: string) => {
    const myMap = new Map([
      ['1', '/about'],
      ['2', '/mine']
    ])

    return myMap.get(key) || ''
  }
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div onClick={linkHome} className={styles.demoLogo} />
        <Menu theme="dark" className={styles.menu} onClick={handleChangeItem} selectedKeys={selectkey} defaultSelectedKeys={selectkey} mode="inline" items={items} />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content className={styles.content}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div className={styles.contentOutlet}>
            <Outlet />
          </div>
        </Content>
        <Footer className={styles.homeFooter}>footer ©2023 Created by mengchuan</Footer>
      </Layout>
    </Layout>
  );
};

export default HomePage
